import 'package:fate_blind_box/chat_pages/pay_manager/pay_code_verify/pay_code_viewmodel.dart';
import 'package:fate_blind_box/config/app_style.dart';
import 'package:fate_blind_box/widget/code_input.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';

/// 支付密码弹窗
class PayCodeDialog extends StatelessWidget {
  const PayCodeDialog({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => PayCodeViewModel(),
      builder: buildUi,
    );
  }

  /// UI构建
  Widget buildUi(context, child) {
    return Container(
      width: double.infinity,
      height: 221 + MediaQuery.of(context).viewInsets.bottom,
      decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(8), topRight: Radius.circular(8))),
      child: SafeArea(
        bottom: false,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30.0),
          child: Column(
            // mainAxisSize: MainAxisSize.min,
            children: [
              Padding(
                padding: EdgeInsets.only(top: 24.w, bottom: 12.w),
                child: Text(
                  '请输入支付密码',
                  style: TextStyle(
                      color: "1D2129".stringToColor,
                      fontSize: 16,
                      fontFamily: 'PingFang SC',
                      fontWeight: FontWeight.w500),
                ),
              ),
              Text(
                '为保障账户安全，请输入支付密码验证身份',
                style: TextStyle(
                    color: '86909C'.stringToColor,
                    fontSize: 13,
                    fontFamily: 'PingFang SC',
                    fontWeight: FontWeight.w400),
              ),
              const SizedBox(height: 48),
              _buildVerificationCodeInputWidget(context),
              const SizedBox(height: 13),
              Consumer<PayCodeViewModel>(builder: (context, snapshot, child) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Visibility(
                      visible: snapshot.isCodeError,
                      child: Expanded(
                          child: Text(
                        '支付密码错误',
                        style: TextStyle(
                            color: 'D83931'.stringToColor,
                            fontSize: 13,
                            fontFamily: 'PingFang SC',
                            fontWeight: FontWeight.w400),
                      )),
                    ),
                    InkWell(
                      onTap: () => snapshot.faceVerification(),
                      child: Text(
                        '忘记密码',
                        style: TextStyle(
                            color: '3254FF'.stringToColor,
                            fontSize: 13,
                            fontFamily: 'PingFang SC',
                            fontWeight: FontWeight.w400),
                      ),
                    ),
                  ],
                );
              }),
            ],
          ),
        ),
      ),
    );
  }

  /// 验证码输入框
  Widget _buildVerificationCodeInputWidget(BuildContext context) {
    return Consumer<PayCodeViewModel>(builder: (context, snapshot, child) {
      return CodeInputWidget(
        controller: snapshot.payCodeController,
        unfocus: false,
        autoFocus: true,
        onSubmitted: (value) async {
          await snapshot.verifyPayCode(context, value);
        },
        obscureText: true,
        obscuringCharacter: "·",
      );
    });
  }
}
